<template>
    <div id="houtaiIndex" style="height: 100%">
        <el-container class="wai-box">
            <el-header class="myheader" height='70px'>
                <div class="logo">
                    <img :src="logo" alt="这是我的logo" id="mylogo">
                </div>
                <div class="header-title" style="font-size: 1.6rem;font-weight: bold;padding-left: 20px">
                    <span class="yanse">同程艺龙</span> <span class="shu"> |</span><span>交通孵化中心业务后台</span>
                </div>
                <div class="header-right">
                    <span id="loginMsg">您好,{{userName}}</span>
                    <el-button type="primary" size="mini" @click="outlogin">退出登录</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" heigth="100%">
                    <el-menu
                            router
                            background-color="#2D2E42"
                            text-color="#777F8F"
                            active-text-color="#FFFFFF"
                            :default-active="routerPath"
                            :unique-opened='true'
                            heigth="100%"
                    >
                        <el-menu-item index="/shouye1">
                            <i class="iconfont icon">&#xe770;</i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="iconfont icon">&#xe7b6;</i>
                                <span>商品管理</span>
                            </template>
                            <el-menu-item index="/productlist">商品列表</el-menu-item>
                            <el-menu-item index="/addProduct">新增商品</el-menu-item>
                            <el-menu-item index="/ProductDetails">商品详情</el-menu-item>
                            <el-menu-item index="/ProductRecord">进出货管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="iconfont icon">&#xe625;</i>
                                <span>订单管理</span>
                            </template>
                            <el-menu-item index="/ddgl">订单管理</el-menu-item>
                            <el-menu-item index="/ddxq">订单详情</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="iconfont icon">&#xe656;</i>
                                <span>权限管理</span>
                            </template>
                            <el-menu-item index="/userManager">用户管理</el-menu-item>
                            <el-menu-item index="/roleManager" v-if="isAdmin">角色管理</el-menu-item>
                            <el-menu-item index="/permissionsDetail" v-if="isAdmin">权限明细</el-menu-item>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="iconfont icon">&#xe6cf;</i>
                                <span>优惠劵</span>
                            </template>
                            <el-menu-item index="/coupon">创建优惠劵</el-menu-item>
                            <el-menu-item index="/couponActive">优惠券活动</el-menu-item>
                            <el-menu-item index="/couponSituation">数据概况</el-menu-item>
                            <el-menu-item index="/activeList">活动列表</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import {mapActions, mapState, mapGetters, mapMutations} from 'vuex'

    export default {
        name: 'index',
        data() {
            return {
                screenHeight: document.body.clientHeight+170,
                logo: require('../../assets/images/logo.png'),
                userName: sessionStorage.getItem("username"),
                isAdmin:Boolean(sessionStorage.getItem("isAdmin")),
            }
        },
        methods: {
            ...mapActions(['actOutlogin']),
           /* ...mapMutations(["changeAdmin"]),*/
            //待处理问题
            outlogin() {

                if(this.isAdmin){
                    this.changeAdmin()
                    // console.log(this.isAdmin)
                }
                this.$router.push('/login');
            }
        },
       beforeCreate(){

       },
        mounted() {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenHeight = document.body.clientHeight
                    that.screenHeight = window.screenHeight
                })()
            }
        },
        watch: {
            screenHeight(val) {
                if (!this.timer) {
                    this.screenHeight = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        // console.log(that.screenHeight)
                        that.timer = false
                    }, 400)
                }
            }
        },
        computed: {
           /* ...mapGetters(["isAdmin"]),*/
            routerPath() {
                let path = ''
                if (this.$route.path === '/index') {
                    path = '/shouye1'
                } else {
                    path = this.$route.path
                }
                return path
            }
        },
    }
</script>
<style scoped lang="less">
    .myheader {
        /*background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#2B42CD), to(#6C42B7));!*谷歌*!*/
        background: linear-gradient(to right, #2B42CD, #6C42B7);
        color: #ffffff;
        /* text-align: center; */
        line-height: 70px;
        height: 70px;
        /*高度在标签内设置的*/
        margin: 0;
        padding: 0;
        display: flex;

        .logo {
            flex: 1;
            display: flex;
            /*border: 1px solid red;*/
            justify-content: center;
        }

        .header-title {
            display: flex;
            flex: 3;
            /*border: 1px solid red;*/
            justify-content: center;
        }

        .header-right {
            flex: 1;
            display: flex;
            /*border: 1px solid red;*/
            justify-content: space-around;
            align-items: center;

        }

    }

    .el-aside {
        background-color: #2D2E42;
        /*text-align: center;*/
        /*height: 100vh;*/
        overflow-x: hidden;

    }
    .yanse{
        color: #FF9900;
    }

    .el-submenu {
        width: 200px;
    }

    .el-main {
        background-color: #F8F8F8;
        color: #333;
        /*text-align: center;*/
    }

    #mylogo {
        height: 70px;
        width: 70px;
    }

    #exit {
        margin: 0 15px;
    }

    a {
        text-decoration: none;
    }

    #loginMsg {
        margin: 0 15px;
    }

    .el-menu-item {
        color: #777F8F;
    }

    .el-menu-item.is-active {
        color: #ffffff;
        /*border-radius: 20px;*/
        /*height: 40px;*/
        /*line-height: 40px;*/
        background-color: #386BE1 !important;
    }

    .header-box {
        width: 95%;
        margin: 0 auto;
    }
    .shu{
        margin: 0 20px;
    }
    @font-face {
        font-family: 'iconfont';  /* project id 1815595 */
        src: url('//at.alicdn.com/t/font_1815595_gtk7cndmjgc.eot');
        src: url('//at.alicdn.com/t/font_1815595_gtk7cndmjgc.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_1815595_gtk7cndmjgc.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_1815595_gtk7cndmjgc.woff') format('woff'),
        url('//at.alicdn.com/t/font_1815595_gtk7cndmjgc.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_1815595_gtk7cndmjgc.svg#iconfont') format('svg');
    }
    .icon{
        margin-right: 10px;
    }
    .wai-box{
        height: 100%;
    }
</style>
